import React, { Component } from "react";
import "./PayFail.scss";
import { connect } from "react-redux";
import { getPayDatas } from "../../../Redux/Action/nativeDatas/nativeDatas";
import MainLayout from "../../../component/mainLayout/mainLayout";
import SliderBar from "../../../component/sliderBar/sliderBar";
import { Carousel } from "antd-mobile";
class PayFail extends Component {
	constructor(props) {
		super(props);
		this.state = {};
	}

	componentDidMount() {
		console.log(this.props);
	}

	componentWillUnmount() {
		this.props._getPayDatas({
			failureReason: "" //支付失败原因
		});
	}

	//返回首页
	goToHome = () => {
		//window.history.go(-1);
		this.props.history.replace({
			pathname: `/xhfHomeCredit`
		});
	};

	//返回小辉付首页
	/* gobacktoindex(){
	this.props.history.push('/walletHome')
  } */

	goToSliderPage = e => {
		//bnner跳转
		this.props.history.push({
			pathname: e.link,
			state: {
				fromUrl: "/xhfHomeCredit"
			}
		});
	};

	//重试
	goToPay = () => {
		this.props.history.replace({
			pathname: `/payCode`
		});
	};

	render() {
		const headerParams = {
			header: {
				title: "支付结果",
				goBackPath: "/xhfHomeCredit"
			},
			//isModal: true,
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,

			loadStatus: this.state.loadStatus // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};
		let sliderBarList = "";
		if (
			this.props.getPayDatas.adListInfo &&
			this.props.getPayDatas.adListInfo.length > 0
		) {
			let List = this.props.getPayDatas.adListInfo.map(it => {
				return (
					<SliderBar
						className="CarouselCon"
						comData={it}
						key={it.pointId}
						buttCallBack={this.goToSliderPage.bind(this)}
					/>
				);
			});
			sliderBarList = (
				<div className="CarouselCon">
					<Carousel infinite={true} autoplay={true}>
						{List}
					</Carousel>
				</div>
			);
		}
		return (
			<MainLayout pageParams={headerParams}>
				{/*<Header phoneStyle={this.props.getAppPlatformsDatas.phoneX} title='付款结果' />*/}
				<div className="kf-tel">支付遇到问题？请拨打客服热线 400-690-6663</div>
				<div className="pay-fail-page">
					<i className="icon-fail"></i>
					<span className="pay-money-text">支付失败</span>
					{this.props.getPayDatas.failureReason && (
						<span className="fail-tips">
							原因：{this.props.getPayDatas.failureReason}
						</span>
					)}

					<a className="submit-btn" onClick={this.goToPay.bind(this)}>
						再试一次
					</a>
					<a className="submit-btn2" onClick={this.goToHome.bind(this)}>
						返回首页
					</a>

					{sliderBarList}
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps(dispatch) {
	return {
		_getPayDatas: options => {
			dispatch(getPayDatas(options));
		}
	};
}

export default connect(mapStateToProps, mapDispatchToProps)(PayFail);
